<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    请输入姓名：
    <input type="text" id="name">
    <button onclick="save()">保存</button>
    <button onclick="get()">获取姓名</button>


    <div id="ganfan">你已经干了0碗饭！</div>
    <button onclick="ganfan()">我能去你家干一碗饭吗？</button>

    <script>
        function save(){
            var name = document.getElementById("name").value;
            // alert(name);
            if(typeof(Storage) !== "undefined"){
                // localStorage 特点：没有过期时间（without any expiration date）,浏览器关闭，数据也不会删除
                // localStorage 以键值对的方式保存数据
                // key / value 
                localStorage.name = name;
            }
        }

        function get(){
            if(typeof(Storage) !== "undefined"){
                alert(localStorage.name);
            }
        }


        function ganfan(){
            if(typeof(Storage) !== "undefined"){
                // sessionStorage 特点：只有一个会话（session）时间，关闭浏览器之后数据被删除
                if(sessionStorage.count){
                    sessionStorage.count ++;
                }else{
                    sessionStorage.count = 1;
                }
                document.getElementById("ganfan").innerHTML = "你已经干了"+sessionStorage.count+"碗饭！";
            }
        }
    </script>
</body>
</html>